<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/myindex.css">
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
    <div class="box" id="app">
        <!-- 主体区域 -->
        <div class="main-wrap">
            <!-- 搜索区域 -->
            <div class="search">
                <div class="logo">
                    <img src="images/player_title.png">
                </div>
                <input type="text" v-model="searchSongsName" @keyup.enter="searchSongs" />
            </div>

            <!-- 播放区域 -->
            <div class="player-wrap">
                <!-- 歌曲列表区域 -->
                <div class="music-list">
                    <div class="row" v-for="items in searchSongsList">
                        <div class="play" @click.prevent="playSongs(items.id)"></div>
                        <div class="song-name">{{items.name}}</div>
                        <div class="mv-play" :href="mvUrl" v-show="items.mvid!=0" @click="playMv(items.mvid)" target="_blank" ></div>
                    </div>
                </div>
                <!-- 左分割线 -->
                <img src="images/line.png" class="line">
                <!-- 播放动画与封面 -->
                <div class="player">
                    <div class="pic-wrap"  :class="{playing:isPlaying}">
                        <img src="images/player_bar.png" class="player_bar">
                        <img src="images/disc.png" class="disc autoRotate">
                        <img :src="coverUrl" class="cover autoRotate">
                        <!-- <img src="images/cover.png" class="cover autoRotate"> -->
                    </div>
                </div>
                <!-- 右分割线 -->
                <img src="images/line.png" class="line">
                <!-- 热门留言区域 -->
                <div class="discuss">
                    <div class="title">热门留言</div>
                    <table  class="person" v-for="items in hotDiscuss" >
                        <tr>
                            <th rowspan="2" class="portrait"><img :src="items.user.avatarUrl"></th>
                            <th  class="nickname" valign="middle">{{items.user.nickname}}</th>
                        </tr>
                        <tr>
                            <td class="message">{{items.content}}</td>
                        </tr>
                    </table>
                </div>
                <!-- 播放音乐视频控制区域 -->
                <div class="footer">
                    <!-- autoplay:音频就绪后马上播放 -->
                    <!-- controls:向用户展示控件 -->
                    <!-- loop:音频结束重复播放 -->
                    <audio ref='audio' @play="play" @pause="pause" :src="playUrl" controls autoplay loop class="myaudio"></audio>
                </div>
            </div>
            <div class="video_con" v-show="isShow" style="display: none;">
                <video :src="mvUrl" controls="controls"></video>
                <div class="mask" @click="hide"></div>
            </div>
        </div>
    </div>
    <script src="js/mymain.js"></script>
</body>

</html>